<template>
	<view class="container">
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item>
					<view class="swiper-item uni-bg-red">
						<image src="../../static/image/lunbo1.png" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">
						<image src="../../static/image/lunbo2.png" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">
						<image src="../../static/image/lunbo3.png" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<uni-notice-bar show-icon scrollable style="height: 80rpx; margin-top: 20rpx;"
			text="随着春季的到来，为了增强班级凝聚力，促进同学间的友谊与合作精神，我们计划组织一次班级户外拓展活动。现将有关事项通知如下，请大家仔细阅读并按要求做好准备。" />
		</uni-section>
		<view class="container-one">
			<uni-grid :column="2" :square="false" :highlight="false">
				<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
					<view class="grid-item-box" @click="navigateToPage(item.path)">
						<image :src="item.url" class="image" mode="aspectFill" />
						<text class="text">{{ item.text }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view class="container-twe">
			<view class="twe-text">
				<text>学习任务</text>
				<view class="twe-icoe">
					<text>更多</text>
					<image src="../../static/image/youbiao.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="container-three">
			<view class="three-text">
				<view class="three-left">
					<image src="../../static/image/时钟 实心.png" mode=""></image>
					<text>我的任务</text>
				</view>
				<view class="three-icoe">
					<image src="../../static/image/添加.png" mode=""></image>
					<text style="color: goldenrod;">添加</text>
				</view>
			</view>
			<view class="three-xuexi">
				<view class="xuexi-icon">
					<image src="../../static/image/学习任务单.png" mode=""></image>
					<view class="xuexi-text">
						<text>添加学习任务</text>
						<p>每日离梦想更进一步</p>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				list: [{
						url: '/static/image/在线考试.png',
						text: '在线考试',
						path: '/pages/online/online',
					},
					{
						url: '/static/image/错题本.png',
						text: '错题本',
						path: '/pages/error/error',
					},
					{
						url: '/static/image/历年真题2.png',
						text: '历年真题',
						path: '/pages/word/word',
					},
					{
						url: '/static/image/考核.png',
						text: '题型刷题',
						path: '/pages/question/question',
					},
				],
			}
		},
		methods: {
			// 页面跳转方法
			    navigateToPage(path) {
			      if (path) {
			        uni.navigateTo({
			          url: path, // 跳转到指定页面
			        });
			      } else {
			        console.warn('未定义跳转路径');
			      }
			    },
		},
	};
</script>

<style>
	.container {
		font-size: 14px;
		line-height: 40px;
		background-color: #fff;
		height: 802px;
	}

	.uni-margin-wrap {
		width: 100%;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-item image {
		height: 400rpx;
		width: 100%;
	}

	.image {
		width: 70px;
		height: 70px;
	}

	.container-one {
		margin-top: 10rpx;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.container-twe {
		width: 100%;
		height: 30rpx;
	}

	.twe-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx;
	}

	.twe-icoe {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.twe-icoe image {
		width: 40rpx;
		height: 40rpx;
	}

	.container-three {
		width: 100%;
		height: 400rpx;
		margin-top: 30px;
	}

	.three-text {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.three-left {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.three-left image {
		width: 40rpx;
		height: 40rpx;
	}

	.three-icoe {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.three-icoe image {
		width: 40rpx;
		height: 40rpx;

	}

	.three-xuexi {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 50rpx;
	}

	.xuexi-icon {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xuexi-icon image {
		width: 90rpx;
		height: 90rpx;
	}

	.xuexi-text {
		padding: 20rpx;
		color: grey;
	}

	.xuexi-text text {
		margin-left: 20rpx;
	}
</style>